<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>你最喜欢的人物</h1>
        <input type="checkbox" @change="fullCheck()" v-model="all">全选<br>
        <span v-for="item in users"><input type="checkbox" @change="checkClick()" v-model="item.check">{{item.name}}</span>
        <br>
        新增其他：<input type="text" v-model="newName"><br>
        <input type="file" @change="load($event)"><button @click="add()">上传</button><br>
        <button @click="fullCheck1(true)" >全选</button>
        <button @click="fullCheck1(false)" >全不选</button>
        <button @click="fanfullCheck1()">反选</button>
        <span v-for="item in imgs">
            <img :src="item" alt="" style="width: 200px; height: 300px;">
        </span>
    </div>
    
</body>
</html>
<script>
    const appConn = Vue.createApp({
        data() {
            return {
                users:[{name:'星!',src:'./paidaxin.webp',check:false},
                {name:'驴!',src:'./lv.png',check:false},
                {name:'蛙!',src:'./wa.jpg',check:false},
                {name:'鱼!',src:'./yu.jpg',check:false},
                ],
                select:false,
                imgs:[],
                all:false,
                name:'',
                fileSrc:'',
                newName:'',
            }
        },
        methods: {
            showImages(){
                this.imgs=[]
                this.users.map(v=>{
                    if(v.check){
                        this.imgs.push(v.src)
                    }
                })
            },
            checkClick(){
                let flag=this.users.length//先获取数组的长度，数组给变量
                //对数组进行遍历，如果碰到check是false，flag减一
                this.users.map(v=>{
                    if(v.check==false) flag--;
                })
                //如果循环结束后，flag仍然等于数组的长度，则all变量为true
                if(flag==this.users.length) {
                    this.all=true
                }else{
                    this.all=false
                }
                this.showImages()

            },
            fullCheck(){
                if(this.all){
                    this.users.map(v=>{
                        v.check=true
                    })
                }else{
                    this.users.map(v=>{
                        v.check=false
                    })
                }
                this.showImages()
            },
            fullCheck1(st){
               
                this.users.map(v=>{
                        v.check=st
                })
               this.checkClick()
            },
            fanfullCheck1(){
                this.users.map(v=>{
                        v.check=!v.check
                })
                this.checkClick()
            },
            load(e){
                let file=e.target.files
                let img=new FileReader()
                img.readAsDataURL(file[0])
                img.onload=({target})=>{
                    alert("上次成功")
                    this.fileSrc=target.result
                    console.log(this.fileSrc);
                }
            },
            add(){
                if(this.newName!=''){
                    this.users.push({
                    name:this.newName,
                    src:this.fileSrc,
                    check:false,
                    })
                }else{
                    alert("请输入你要添加的人物")
                }
                
            }
        },
    }).mount("#app");
</script>